<template>
<div>
  <home-header></home-header>
  <banner :list = 'swiperContent'></banner>
  <shotcut :itemList = 'shotcut'></shotcut>
  <recommend :recommendList = 'recommend'></recommend>
  <weekend :list = 'weekend'></weekend>
</div>
</template>

<script>
import axios from 'axios'
import HomeHeader from '@pages/home/components/Header'
import Banner from '@pages/home/components/Banner'
import Shotcut from '@pages/home/components/Shotcut'
import Recommend from '@pages/home/components/Recommend'
import Weekend from '@pages/home/components/Weekend'
import { mapState } from 'vuex'
export default {
  name: 'Home',
  components: {
    HomeHeader,
    Banner,
    Shotcut,
    Recommend,
    Weekend
  },
  data () {
    return {
      swiperContent: [],
      shotcut: [],
      recommend: [],
      weekend: [],
      lastCity: ''
    }
  },
  computed: {
    ...mapState(['city'])
  },
  methods: {
    getInfor () {
      axios.get('/api/index.json?city=' + this.city)
        .then((r) => {
          const infor = r.data.data
          this.swiperContent = infor.swiperList
          this.shotcut = infor.iconList
          this.recommend = infor.recommendList
          this.weekend = infor.weekendList
        })
        .catch((e) => {
          console.log(e)
        })
    }
  },
  mounted () {
    this.getInfor()
  },
  activated () {
    if (this.city !== this.lastCity) {
      this.getInfor()
      this.lastCity = this.city
    }
  }
}
</script>
